<template>
    <div>
        <v-layout style="background: linear-gradient(to right, rgb(29, 52, 70), rgb(25, 28, 31)); padding:0px;" justify-center align-center row wrap>
            <div  style=" text-align:center; width:100%;">
                <v-layout justify-center align-center row wrap>
                    <v-flex class="pl-intro" style="height:100%;" xs12 sm12 md6>
                        <h1 class="custom-header" style="font-weight:400;"> Auction Dapp</h1>
                        <h3 class="custom-header" style="font-size:1.6em; font-weight:100;">
                            Decentralized auction platform powered by Ethereum
                        </h3>
                        <br />
                        <!-- <v-btn style="margin:0;" color="white"  large>
                            <v-icon style="color: red !important;" >import_contacts</v-icon>
                            <span style="margin-left:10px;     color: red;">Placeholder</span> 
                        </v-btn> -->
                        <br />
                        <br />
                    </v-flex>
                    <v-flex style="height:100%;" class="pl-intro-2" xs12 sm12 md6>
                        <img style="width:300px;" src="" />
                    </v-flex>
                </v-layout>
            </div>
        </v-layout>
        <v-layout v-show="!metamaskInstalled" style="background-color: #F44336; color: white; padding: 25px; text-align: center;" justify-center align-center row wrap>
            <v-flex style="height:100%; padding-bottom:20px;" xs12 sm12 md12>
                <h1 style="color:#fff;margin-bottom: 20px; line-height: 32px;">Metamask was not detected!</h1>
            </v-flex>
        </v-layout>
        <v-layout v-show="metamaskInstalled" style=" color: white; padding: 25px; text-align: center;" justify-center align-center row wrap>
            <v-flex style="height:100%; padding-bottom:20px;" xs12 sm12 md12>
                <h1 style="color:#273232;margin-bottom: 20px; line-height: 32px;">Recent Auctions</h1>
            </v-flex>
            <v-flex v-show="loadingAuctions" style="height:100%; padding-bottom:20px;" xs12 sm12 md12>
                <v-progress-linear v-bind:indeterminate="true"></v-progress-linear>
            </v-flex>

            <v-flex :key="index" v-for="(auction, index) in auctions" style="height:100%; padding:30px;" xs12 sm4 md4>
                <v-card>
                    <v-card-media :src="auction.image" height="300px">
                        <!-- <img height="300px" :src="auction.image" /> -->
                    </v-card-media>
                    <v-card-title style="text-align:left;" primary-title>
                        <div>
                            
                            <div class="headline">{{auction.title}}</div>
                            <span class="grey--text">Deed ID: <b>{{auction.deedId}}</b></span><br />
                            <span class="grey--text">Start price: <b>{{auction.startingPrice}} ETH</b></span><br />
                            <span class="grey--text">Expiration date: <b>{{auction.expirationDate}}</b></span><br />
                            <span class="grey--text">Status: 
                                <b v-show="auction.active" style="color:green">Active</b>
                                <b v-show="!auction.active" style="color:red">Inactive</b>
                            </span>
                        </div>
                    </v-card-title>
                    <v-card-actions>
                        <v-btn :disabled="!auction.active" @click="openAuction(auction.id)" outline color="teal" flat>Bid</v-btn>
                        <v-btn @click="openAuction(auction.id)" outline color="blue" flat>Chat</v-btn>
                        <v-spacer></v-spacer>
                    </v-card-actions>
                    <v-slide-y-transition>
                        <!-- <v-card-text>placeholder</v-card-text> -->
                    </v-slide-y-transition>
                </v-card>
            </v-flex>
            <v-flex style="height:100%; padding-bottom:20px;" xs12 sm12 md12>
                <v-btn outline color="teal">Load More Auctions</v-btn>
            </v-flex>

        </v-layout>
        <v-layout v-show="false" style=" color: white; padding: 25px; text-align: center;     background-color: rgb(3, 46, 66);" justify-center align-center row wrap>
            <v-flex style="height:100%; padding-bottom:20px;" xs12 sm12 md12>
                <h1 style="margin-bottom: 20px; line-height: 32px;">Login as</h1>
                <div style="width: 60%; margin: 0 auto;">
                    <v-btn outline color="white">Post an auction</v-btn>
                    <v-btn outline color="white">Auctions</v-btn>
                </div>
            </v-flex>
        </v-layout>
    </div>
</template>
<script>
    import moment from 'moment'
    import { AuctionRepository } from '../models/AuctionRepository'
    export default {
        data: () => ({
            loadingAuctions: true,
            auctions: []
        }),
        computed: {
            metamaskInstalled(){
                return this.$root.$data.globalState.getMetamaskInstalled()
            }
        },
        methods: {
            openAuction(id) {
                this.$router.push({ name: 'Auction', params: { id: id }})
            }
        },
    
        async mounted() {
                this.$auctionRepoInstance.setAccount('')
                const count = await this.$auctionRepoInstance.getCount()
                for(let i=0;i<count;i++){
                    let auction = await this.$auctionRepoInstance.findById(i)
                    // get metadata
                    const swarmResult = await this.$http.get(`${this.$config.BZZ_ENDPOINT}/bzz-list:/${auction[3]}`)
                    let imageUrl = ''
                    swarmResult.body.entries.map((entry) => {
                        if('contentType' in entry) imageUrl = `${this.$config.BZZ_ENDPOINT}/bzz-raw:/${auction[3]}/${entry.path}`
                    })
                    this.auctions.push({
                        id: i,
                        image: imageUrl,
                        title: auction[0],
                        expirationDate: moment(new Date(auction[1].toNumber() * 1000)).format('dddd, MMMM Do YYYY, h:mm:ss a'),
                        startingPrice: web3.fromWei(auction[2].toNumber(), 'ether'),
                        metadata: auction[3],
                        deedId: auction[4].toNumber(),
                        deedRepositoryAddress: auction[5],
                        owner: auction[6],
                        active: auction[7],
                        finalized: auction[8]
                    })
                }
                this.loadingAuctions = false
            
        }
    };
</script>
<style>

</style>